<template>
	<view class="release">
		<u-navbar :placeholder='true' bgColor='#fff' title="发布动态" @leftClick='pageBack(1)' @rightClick="navRightClick"
			:autoBack="false" titleStyle='fontSize:18px;fontWeight: 500;'>
			<view class="leftSlot" slot="left">
				<text>取消</text>
			</view>
			<view class="rightSlot" slot="right">
				<text>发布</text>
			</view>
		</u-navbar>
		<view class="releaseCon">
			<text class="topic2">#腰椎日常保养</text>
			<u--textarea border='none' height='122' v-model="content" placeholder="分享新鲜事..."></u--textarea>
			<view class="topic">
				<text>#话题</text>
			</view>
			<view class="uploadCon">
				<view class="uploadImge"  v-for="(item,index) in 5" :key="index">
					<image src="/static/images/nav-tag-1.png" mode=""></image>
				</view>
				<view class="upload uploadImge" @tap="sheetShow=true">
					<view class="iconfont icon-xiaolian">
					</view>
					<text>照片/视频</text>
				</view>
			</view>
			<view class="position">
				<view class="iconfont icon-dingwei1">
				</view>
				<text>东莞市  东城区 君豪商业中心</text>
			</view>
		</view>
		<view class="delectPic">
			<view class="iconfont icon-shanchu">
			</view>
			<text>拖动到此处删除</text>
		</view>
		<!-- 选择弹窗 -->
		<u-action-sheet @select='actionSelect' :show="sheetShow" round='10' @close="sheetShow = false"
			:actions="actions" cancelText="取消">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				sheetShow: false,
				actions: [{
						name: '拍照',
					},
					{
						name: '拍视频',
					},
					{
						name: '相册',
					},
				],
			}
		},
		methods: {
			navRightClick() {

			},
			actionSelect(e) {
				console.log('e', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leftSlot {}

	.rightSlot {
		width: 112rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		background: $theme-color;
		color: #fff;
	}

	.release {

		.releaseCon {
			background-color: #fff;
			margin: 24rpx 32rpx 0 32rpx;
			padding: 24rpx;
			border-radius: 20rpx;

			.topic {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 112rpx;
				height: 48rpx;
				border-radius: 4rpx;
				background: rgb(246, 248, 252);
				font-size: 28rpx;
				font-weight: 400;
				margin-top: 20rpx;
			}

			.topic2 {
				color: rgba(76, 212, 230, 1);
				font-size: 28rpx;
				font-weight: 400;
			}

			.uploadCon {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 40rpx;
				
				.uploadImge{
					margin-bottom: 20rpx;
				}

				image {
					width: 206rpx;
					height: 206rpx;
					border-radius: 8px;
					margin-right: 8rpx;
				}

				.upload {
					width: 206rpx;
					height: 206rpx;
					border-radius: 8rpx;
					background: rgb(246, 248, 252);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(152, 160, 166, 1);

					.iconfont {
						font-size: 38rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.position {
				position: relative;
				width: fit-content;
				border-radius: 24rpx;
				background: rgb(246, 248, 252);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 8rpx 16rpx;
				margin-top: 12rpx;
				font-size: 22rpx;
				padding: 8rpx 16rpx 8rpx 16rpx;

				.iconfont {
					margin-right: 8rpx;
					font-size: 42rpx;
				}
			}
		}

		.delectPic {
			position: fixed;
			bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			width: 100%;
			height: 112rpx;
			background: rgb(255, 85, 77);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
			font-weight: 400;

			.iconfont {
				margin-bottom: 16rpx;
			}
		}
	}

	.u-action-sheet__item-wrap__item {
		padding: 0;
		height: 112rpx;
		font-size: 36rpx;
	}

	::v-deep .u-action-sheet__item-wrap__item {
		padding: 0;
		height: 112rpx;
		font-size: 36rpx;
	}

	.u-line {
		width: 90% !important;
		margin: 0 auto !important;
	}

	::v-deep .u-line {
		width: 90% !important;
		margin: 0 auto !important;
	}


	.u-gap {
		background-color: $page-color-base !important;
	}

	::v-deep .u-gap {
		background-color: $page-color-base !important;
		height: 8px !important;
	}
</style>